<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author: NWJ
        Version: 1.0 -->

<template>
  <div class="main-content">
    <div class="message-container" style="user-select: none; padding: 20px;">
      <el-timeline>
        <el-timeline-item
          v-for="item in messages"
          :key="item.id"
          :timestamp="formatDate(item.createdAt)"
          placement="top"
          type="primary"
        >
          <el-card shadow="hover">
            <h3 class="message-title">{{ item.title }}</h3>
            <p class="message-content">{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { showMsg } from '@/utils/showMsg'

export default {
  components: {
    // 移除 commonGlassCard 依赖
  },
  data()
  {
    return {
      messages: [] // 存储消息列表
    }
  },
  created()
  {
    this.fetchMessages()
  },
  methods: {
    // 获取消息列表
    async fetchMessages()
    {
      try
      {
        const response = await axios.get('/node/articles')
        this.messages = response.data.msg || [] // 确保数据格式正确
      }
      catch (error)
      {
        showMsg('数据加载失败', '无法获取消息列表，请检查网络或联系管理员', 'error')
        console.error('Error fetching messages:', error)
      }
    },
    // 格式化时间
    formatDate(dateString)
    {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.main-content {
  height: calc(100vh - 100px);
  overflow: hidden;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-container {
  width: 1000px;
  height: calc(100vh - 120px); /* 调整高度以适配页面布局 */
  background: rgba(255, 255, 255, 0.9); /* 轻微透明背景 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 启用纵向滚动 */
  padding: 20px;
  scrollbar-width: thin; /* 细滚动条（Firefox） */
  scrollbar-color: #425aef #f1f1f1; /* 更新滚动条颜色（Firefox） */
}

/* 自定义滚动条样式（Chrome、Safari） */
.message-container::-webkit-scrollbar {
  width: 8px;
}

.message-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.message-container::-webkit-scrollbar-thumb {
  background: #425aef; /* 更新滑块颜色 */
  border-radius: 4px;
}

.message-container::-webkit-scrollbar-thumb:hover {
  background: #3548b5; /* 悬停时颜色变深 */
}

.message-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.message-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap; /* 保留换行和空格 */
  word-break: break-word; /* 确保长文本换行 */
}

.el-timeline {
  width: 100%;
}

.el-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-timeline-item__timestamp {
  font-size: 12px;
  color: #999;
}
</style>
